<div id="chart"> </div>
<i> The graphs above are stacked, and questions are counted both on their own as well as part of the tally for notes (because they are a form of note). Additional discrepancies may come from the tag page also listing questions tagged with "question:_____" but lacking the base tag, and also listing notes with only "child tags" of the base tag, in a system we are <a href="https://github.com/publiclab/plots2/issues/6367">planning to slowly deprecate</a>. </i>
    <br>
 <% if @tags.first.count.nil? %>
        <i> There are no posts for this tag yet </i>
    <% else %>
        <b>Total Tag count : <%= @tags.first.count %></b>
    <% end %>
<br>
<br> <br>

<h5> We've started tracking Subscriptions from <%= TagSelection.start_tracking %> </h5>
<hr>
<% if @subscriptions.values.sum == 0 && @all_subscriptions.values.sum == 0 %>
    <i> No subscribers tracked during this period </i>
<%else %>
    <div id="subscriptions"> </div>
<% end %>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>

var options = {
    colors: ['#00E396', '#0090FF', '#800080', '#FFD700'],
    chart: {
        type: "area",
        height: 400,
        foreColor: "#999",
        scroller: {
            enabled: true,
            track: {
                height: 7,
                background: '#e0e0e0'

            },
            thumb: {
                height: 10,
                background: '#94E3FF'

            },
            scrollButtons: {
                enabled: true,
                size: 9,
                borderWidth: 2,
                borderColor: '#008FFB',
                fillColor: '#008FFB'

            },
            padding: {
                left: 30,
                right: 20
            }

        },
        stacked: true,
        dropShadow: {
            enabled: true,
            enabledSeries: [0],
            top: -2,
            left: 2,
            blur: 5,
            opacity: 0.06
        }

    },

    stroke: {
        curve: 'smooth',

    },
    dataLabels: {
        enabled: false,

    },
    series: [{
        name: 'Note tags',
        data: generateSeries(0)
    },{
        name: 'Wiki tags',
        data: generateSeries(1)
    },{
        name: 'Comment tags',
        data: generateSeries(2)
    },{
        name: 'Question tags',
        data: generateSeries(3)
    } ],

        markers: {
            size: 0,
            strokeColor: "#fff",
            strokeWidth: 3,
            strokeOpacity: 1,
            fillOpacity: 1,
            hover: {
                size: 6

            }

        },
        xaxis: {
            type: "datetime",
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false

            }

        },
        yaxis: {
            tickAmount: 5,
            opposite: true,
            labels: {
                offsetX: 24,
                offsetY: -5

            },
            tooltip: {
                enabled: true

            }
        },
        grid: {
            borderColor: '#000000',
            padding: {
                left: -5,
                right: 5

            }

        },
        tooltip: {
            x: {
                format: "dd MMM yyyy"
            },

        },
        legend: {
            position: 'top',
            horizontalAlign: 'left'

        },
        fill: {
            type: "solid",
            fillOpacity: 0.7

        }
};


var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();


function generateSeries(s) {
    var values = [
        <%= notes.values %>,
        <%= wikis.values %>,
        <%= comments.values %>,
        <%= questions.values %>
    ];

    var i = 0;
    var months_dates = <%= notes.keys %>
    var count = months_dates.length;
    var months = months_dates.map(x =>  new Date(x).getTime());
    var series = [];
    while (i < count) {
        for (var j =0; j < months.length; j++) {
            series.push([months[j], values[s][i]]);
            i++;

        }
    }
    return series;
}
</script>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
var data = <%= @all_subscriptions.keys %>;
var months = data.map(x =>  new Date(x).getTime());

   var options = {
      chart: {
        height: 400,
        type: 'line',
        stacked: false,
      },
      stroke: {
        width: [0, 2, 5],
        curve: 'smooth'
      },
      plotOptions: {
        bar: {
          columnWidth: '50%'
        }
      },
      series: [{
        name: 'Tag Subscriptions',
        type: 'column',
        data: <%= @subscriptions.values %>
      }, {
        name: 'All Subscriptions',
        type: 'area',
        data: <%= @all_subscriptions.values %>
      }],
      fill: {
        opacity: [0.85,0.25,1],
          gradient: {
              inverseColors: false,
              shade: 'light',
              type: "vertical",
              opacityFrom: 0.85,
              opacityTo: 0.55,
              stops: [0, 100, 100, 100]
          }
      },
      markers: {
        size: 0
      },
      xaxis: {
      categories: months,
        type:'datetime'
      },
      yaxis: {
        title: {
          text: 'Number of Subscribers',
        },
      },
      legend: {
            position: 'top',
            horizontalAlign: 'left'
      },
      tooltip: {
        shared: true,
        intersect: false,
        y: [{
          formatter: function (y) {
            if(typeof y !== "undefined") {
              return  y.toFixed(0) + " subscribers for this tag" ;
            }
            return y;
          }
        }, {
          formatter: function (y) {
            if(typeof y !== "undefined") {
              return  y + " total subscribers for all tags";
            }
            return y;
          }
        }]
      }

    }

    var chart2 = new ApexCharts(
      document.querySelector("#subscriptions"),
      options
    );

    chart2.render();

</script>
